<template>
	<view>
		<view class="status_bar"></view>
		<view class="container">
			<view class="arrows">
				<cmd-icon type="chevron-left" size="26" color="#654321" class="chevron-left"></cmd-icon>
			</view>
			<view class="titles">
				<text>Welcome!</text>
				<text>欢迎登录聚云卡</text>
			</view>
			<view class="phone">
				<view class="phone-icon">
					<cmd-icon type="iphone-x" size="26" color="#654321"></cmd-icon>
					<text>手机</text>
				</view>
				<view class="phone-title">
					<input type="number" v-model="phones" maxlength="11" placeholder="您激活时使用的手机号" placeholder-style="color:#AAAAAA;font-size:32rpx" />
				</view>
			</view>
			<view class="verfy">
				<view class="verfy-icon">
					<cmd-icon type="iphone-x" size="26" color="#654321"></cmd-icon>
					<text>图形验证</text>
				</view>
				<view class="verfy-codes">
					<view class="verfy-title">
						<input type="number" v-model="codes" maxlength="4" placeholder="输入图形验证码" placeholder-style="color:#AAAAAA;font-size:32rpx" />
					</view>
					<view class="verfy-code" @click="getsVerfyCode">
						<image :src="clickurl"></image>
					</view>
				</view>
			</view>
			<view class="codes">
				<view class="codes-icon">
					<cmd-icon type="mail" size="26" color="#654321"></cmd-icon>
					<text>图形验证</text>
				</view>
				<view class="codes-code">
					<view class="codes-title">
						<input type="number" v-model="code" maxlength="6" placeholder="输入验证码" placeholder-style="color:#AAAAAA;font-size:32rpx" />
					</view>
					<view class="codes-codes">
						<text @click="getCode" v-if="countdowns == 0">获取验证码</text>
						<text v-else-if="countdowns > 0">{{countdowns}}</text>
					</view>
				</view>
			</view>
			<view class="login" @click="login">
				<text>登录</text>
			</view>
			<view class="login-pwd" @click="pwdLogins">
				<text>账号密码登录</text>
			</view>
			<view class="agreements">
				<text>《用户开通协议》</text>
				<text>《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdIcon from "@/components/cmd-icon/cmd-icon.vue";
	export default {
		data() {
			return {
				phones: '',
				clickurl: 'https://api.juyunka.com/jsk/reVerifyCode',
				codes: '',
				code: '',
				countdowns: 0,
				clear: '',
				str:''
			}
		},
		components: {
			cmdIcon: cmdIcon
		},
		methods: {
			getsVerfyCode(e) {
				if (!this.phones) {
					uni.showToast({
						title: '请输入输入手机号',
						duration: 2000
					});
				}
				var strr = new Date().getTime();
				this.clickurl = 'https://api.juyunka.com/jsk/reVerifyCode?str=' + this.phones + '&strr=' + strr
				this.str = this.phones;
			},
			getCode() {
				var strs = '';
				var info = {
					'mobile': this.phones,
					'str': this.str,
					'type': 3,
					'code': this.codes,
				};
				uni.request({
					url: 'https://api.juyunka.com/jsk/sendSms',
					data: info,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'POST',
					success: (res) => {
						console.log(res)
						if (res.data.code == 1000) {
							this.countdowns = 60;
							this.clear = setInterval(this.countDown, 1000);
						} else if(res.data.code == 1012) {
							this.getsVerfyCode()
						}
					}
				});
			},
			login() {
				var info = {
					'mobile': this.phones,
					'code': this.code
				}
				uni.request({
					url: 'https://api.juyunka.com/jsk/loginBySms', //仅为示例，并非真实接口地址。
					data: info,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'POST',
					success: (res) => {
						console.log(res)
						if (res.data.code == 1000) {
							uni.setStorageSync('token', res.data.data.token);
							clearInterval(this.clear);
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				});
			},
			// 倒计时
			countDown() {
				if (!this.countdowns) {
					clearInterval(this.clear);
					//this.getsVerfyCode()
				} else {
					--this.countdowns;
					console.log(this.countdowns)
				}
			},
			pwdLogins(){
				uni.redirectTo({
					url: '/pages/login/pwdLogin'
				})
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.arrows {
		width: 750rpx;
		height: 88rpx;

	}

	.chevron-left {
		margin-top: 35rpx;
		margin-left: 15rpx;
	}

	.titles {
		display: flex;
		flex-direction: column;
	}

	.titles text:nth-child(1) {
		font-size: 86rpx;
		color: #1C1C1C;
		font-weight: bold;
		margin-left: 75rpx;
	}

	.titles text:nth-child(2) {
		font-size: 32rpx;
		margin-left: 76rpx;
	}

	.phone {
		display: flex;
		flex-direction: column;
		margin-top: 118rpx;
		margin-left: 82rpx;
	}

	.phone-icon text {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.phone-title {
		width: 540rpx;
		height: 110rpx;
		margin-left: 62rpx;
		border-bottom: 2rpx #F4F4F4 solid;
	}
	input{
		font-size: 32rpx;
	}
	.phone-title input {
		margin-top: 30rpx;
	}

	.verfy {
		display: flex;
		flex-direction: column;
		margin-top: 42rpx;
		margin-left: 82rpx;
	}

	.verfy-icon text {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.verfy-codes {
		display: flex;
		flex-direction: row;
	}

	.verfy-title {
		width: 240rpx;
		height: 110rpx;
		margin-left: 62rpx;
		border-bottom: 2rpx #F4F4F4 solid;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.verfy-code {
		width: 240rpx;
		height: 70rpx;
		margin-top: 20rpx;
		margin-left: 60rpx;
	}

	.verfy-code image {
		width: 100%;
		height: 100%;
	}

	.codes {
		display: flex;
		flex-direction: column;
		margin-top: 42rpx;
		margin-left: 82rpx;
	}

	.codes-icon text {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.codes-code {
		display: flex;
		flex-direction: row;
	}

	.codes-title {
		width: 240rpx;
		height: 110rpx;
		margin-left: 62rpx;
		border-bottom: 2rpx #F4F4F4 solid;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.codes-codes {
		width: 240rpx;
		height: 70rpx;
		border-radius: 50rpx;
		margin-top: 20rpx;
		margin-left: 60rpx;
		border: 1rpx #F4F4F4 solid;
		font-size: 32rpx;
		color: #1C1C1C;
		line-height: 70rpx;
		text-align: center;
	}

	.login {
		width: 600rpx;
		height: 85rpx;
		border-radius: 12rpx;
		margin: 90rpx 75rpx 0 75rpx;
		background-image: linear-gradient(to right, #FF3C3D, #FF7F62);
		font-size: 36rpx;
		color: #fff;
		line-height: 85rpx;
		text-align: center;
	}

	.login-pwd {
		margin-top: 60rpx;
		font-size: 28rpx;
		color: #AAAAAA;
		text-align: center;
	}

	.agreements {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #FC5E5A;
		margin-top: 40rpx;
	}
</style>
